<template>
  <div class="user-container">

    <div class="header-box" style="display:flex;justify-content: flex-end">
      <div @click="order">
        <IconAli :sty="{width:'40px',height:'40px',margin:'-2px 0px 0px 0px'}" icon='order-1'></IconAli>
      </div>
      <div @click="add">
        <IconAli :sty="{width:'32px',height:'32px',marginRight:'32px'}" icon='add'></IconAli>
      </div>
    </div>

    <div class="table-box">
      <Table :columns="columns"
             :data="userList"
             stripe
             border
             :highlight-row="true"
             size=large>


        <template slot-scope="{ row, index }" slot="status">
          <i-switch v-model="row.status==1"
                    true-color="#19BE6B" false-color="#ff4949"
                    size="large"
                    :disabled="row.userId==0"
                    @on-change="lock(row)">
            <span slot="open">在用</span>
            <span slot="close">冻结</span>
          </i-switch>
        </template>

        <template slot-scope="{ row, index }" slot="handle">
          <div style="display: flex;justify-content: center;">
            <div @click="update(row)">
              <IconAli :sty="{width:'30px',height:'30px',marginRight:'4px'}" icon='edit'></IconAli>
            </div>
            <div @click="del(row)" v-if="row.userId!=0">
              <IconAli :sty="{width:'30px',height:'30px',marginLeft:'4px'}" icon='sub'></IconAli>
            </div>
          </div>
        </template>

      </Table>

    </div>


    <Modal
        v-model="addFlag"
        title="新增用户"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="addOk">

      <el-form label-position="right" label-width="80px" :model="user">
        <el-form-item label="用户名称">
          <el-input clearable v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input clearable v-model="user.userNickName"></el-input>
        </el-form-item>
        <el-form-item label="手机账号">
          <el-input clearable v-model="user.iphoneNo"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input clearable v-model="user.userPwd"></el-input>
        </el-form-item>
      </el-form>

    </Modal>


    <Modal
        v-model="deleteFlag"
        title="删除用户信息"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="deleteOk">
      <template #header>
        <IconAli :sty="{width:'40px',height:'40px'}" icon='danger' style="margin:6px 0px 0px 16px"></IconAli>
      </template>

      <div style="display:flex;flex-direction:column;margin-left: 16px">
        <div class="delTip">是否删除以下用户,此操作不可撤销,请谨慎操作!</div>
        <div class="nodeTip">{{ user.userName }}</div>
      </div>

    </Modal>


    <Modal
        v-model="updateFlag"
        title="编辑用户信息"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="updateOk">

      <el-form label-position="right" label-width="80px" :model="user">
        <el-form-item label="用户名称">
          <el-input clearable v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input clearable v-model="user.userNickName"></el-input>
        </el-form-item>
        <el-form-item label="手机账号">
          <el-input clearable v-model="user.iphoneNo"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input clearable v-model="user.userPwd"></el-input>
        </el-form-item>

        <el-form-item label="角色列表">
          <el-checkbox-group v-model="user.roleIds">
            <div v-for="(obj,i) in roleList" :key="obj.roleId">
              <el-checkbox :label="obj.roleId" name="type" :value="obj.roleId" border>{{ obj.roleName }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

    </Modal>

    <!--用户排序-->
    <Modal
        v-model="orderFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="orderUserOk">

      <Order :dataList="orderUserList" @my-event-order-list="getOrderUserList"></Order>

    </Modal>
  </div>
</template>

<script>
import Order from "@/views/common/Order"
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "User",
  //组件注册
  components: {IconAli, Order},
  //数据驱动
  data() {
    return {
      user: {
        userId: "",
        userName: "",
        userPwd: "",
        userNickName: "",
        iphoneNo: "",
        status: "",
        showOrder: "",
        createTime: "",
        roleIds: []
      },
      roleList: [],
      columns: [
        {
          type: "index",
          title: '索引',
          resizable: true,
          width: 100,
          align: "center"
        },
        {
          title: '编号',
          key: 'userId',
          resizable: true,
          width: 300,
          align: "center"
        },
        {
          title: '姓名',
          key: 'userName',
          resizable: true,
          align: "center"
        },
        {
          title: '昵称',
          key: 'userNickName',
          resizable: true,
          align: "center"
        },
        {
          title: '手机号',
          key: 'iphoneNo',
          resizable: true,
          width: 300,
          align: "center"
        },
        {
          title: '状态',
          key: 'status',
          resizable: true,
          align: "center",
          slot: 'status',
          width: 140,
          sortable: true
        },
        {
          title: '操作',
          key: 'handle',
          align: "center",
          width: 140,
          slot: 'handle',
        }
      ],
      userList: [],
      userIdList: [],
      userId: "",
      //排序
      orderFlag: false,
      orderUserList: [],
      orderUserIdList: [],
      //用户新增 flag
      addFlag: false,
      //删除提示框
      deleteFlag: false,
      //编辑提示
      updateFlag: false,
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    order() {
      this.orderUserList.length = 0
      this.orderFlag = true

      for (let i = 0; i < this.userList.length; i++) {
        let obj = this.userList[i];
        let tmp = {
          id: obj.userId,
          title: obj.userName
        }
        this.orderUserList.push(tmp);
      }
    },
    getOrderUserList(data) {
      this.orderUserIdList = data.idList;
    },
    //排序确定
    orderUserOk() {
      let data = this.orderUserIdList
      this.axios.put(`/login/user/user/order`, data)
          .then((data) => {
            this.selectUserList(-1);
            this.$Message.success('用户排序成功');
          })
    },
    lock(row) {
      let status = row.status;
      let newStatus = 1;
      if (status == 1) {
        newStatus = 0;
      }
      let data = {
        status: newStatus
      }
      this.axios.put(`/login/user/user/status/${row.userId}`, data)
          .then((data) => {
            this.selectUserList(-1);
            this.$Message.success('用户账户已经改变');
          })
    },
    //添加用户
    add() {
      this.addFlag = true;
      this.user = {
        userId: "",
        userName: "",
        userPwd: "",
        userNickName: "",
        iphoneNo: "",
        status: "",
        showOrder: "",
        createTime: "",
      }
    },
    //新增确定
    addOk() {
      let data = {
        userName: this.user.userName,
        userNickName: this.user.userNickName,
        iphoneNo: this.user.iphoneNo,
        userPwd: this.user.userPwd
      }
      this.axios.post(`/login/user/user`, data)
          .then((data) => {
            this.selectUserList(-1);
            this.$Message.success('用户添加成功,请及时修改相关配置');
          })
    },
    //删除
    del(row) {
      this.deleteFlag = true
      this.user = row
    },
    delUser() {
      this.axios.delete(`/login/user/user/${this.user.userId}`)
          .then((data) => {
            this.selectUserList(-1);
            this.$Message.success('用户删除成功!');
          })
    },
    //确定删除
    deleteOk() {
      this.delUser();
    },
    //编辑
    update(row) {
      //打开面板
      this.updateFlag = true
      //根据用户id查询详细信息,将值设入对应位置
      this.axios.get(`/login/user/user/${row.userId}`)
          .then((data) => {
            this.user = data.data
          })
    },
    //编辑确定
    updateOk() {
      let data = {
        userId: this.user.userId,
        userName: this.user.userName,
        userNickName: this.user.userNickName,
        iphoneNo: this.user.iphoneNo,
        userPwd: this.user.userPwd.trim() == '******' ? null : Base64.encode(this.user.userPwd.trim()),
        roleIds: this.user.roleIds
      }
      this.axios.put(`/login/user/user/${this.user.userId}`, data)
          .then((data) => {
            this.selectUserList(-1);
            this.$Message.success('用户信息修改成功!');
          })
    },
    selectUserList(status) {
      this.axios.get(`/login/user/users/${status}`)
          .then((data) => {
            this.userList = data.data
          })
    },
    selectRoleList() {
      this.axios.get(`/login/role/roles`)
          .then((data) => {
            this.roleList = data.data
          })
    }
  },
  created() {
    this.selectUserList(-1);
    this.selectRoleList();
  },
  //钩子函数
  mounted() {
  },
}
</script>

<style lang="less" scoped>
.user-container {
  width: 96%;
  margin-top: 20px;
  margin-left: 2%;
}

.delTip {
  font-size: 20px;
  font-weight: bold;
  color: #F00;
}

.nodeTip {
  margin-top: 6px;
  font-size: 16px;
  color: #000;
  font-weight: bolder;
}
</style>